// pages/my/poster/poster.js
let title = ''
const app = getApp()
Page({

    /**
     * 页面的初始数据
     */
    data: {
        noneview: false, //显示未找到提示
        posterUrl: "https://wenxin.baidu.com/younger/file/ERNIE-ViLG/f4827b8b12d4b33e2cf40495cfa7d0e9ex",
    },

    title_input(e) {

        title = e.detail.value

        console.log(title)
        this.setData({
            inputValue: title
        })
    },


    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        var that = this;
        wx.request({
            url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=RI7cTbxA0s9TlIK2uK6HWMgp&client_secret=7MTqqMlzjxevfEHddTjcl8OSTsRDQIk7',
            data: {},
            header: {
                'content-type': 'application/x-www-form-urlencoded' // 默认值
            },
            success: function (res) {
                // console.log(res.data.access_token)
                that.setData({
                    access_token: res.data.access_token
                })
            }
        })
    },

    submit() {
        var that = this;
        var upload_url = 'https://aip.baidubce.com/rpc/2.0/ernievilg/v1/txt2img?access_token=' + that.data.access_token
        console.log(upload_url)
        wx.request({
            url: upload_url,
            method: 'POST',
            data: {
                "text": title,
                "style": "卡通画",
                "resolution": "1536*1024",
                "num": 1
            },
            header: {
                'content-type': 'application/json' // 默认值
            },
            success: function (res) {
                console.log(res.data)
                console.log(res.data.data.taskId)
                wx.showToast({
                    title: '等待30s...',
                    icon: 'loading',
                    duration: 30000 //持续的时间
                })
                setTimeout(function () {
                    var result_url = 'https://aip.baidubce.com/rpc/2.0/ernievilg/v1/getImg?access_token=' + that.data.access_token
                    console.log(res.data.data.taskId)
                    wx.request({
                        url: result_url,
                        method: 'POST',
                        data: {
                            "taskId": res.data.data.taskId
                        },
                        header: {
                            'content-type': 'application/json' // 默认值
                        },
                        success: function (res) {
                            console.log(res.data)
                            that.setData({
                                posterUrl: res.data.data.img,
                            })
                            console.log(that.data.posterUrl)
                        }
                    })
                }, 30000)
            }
        })

    },

    cancel() {
        this.setData({
            noneview: false
        })
    },

    canvas() {
        this.setData({
            noneview: true
        })
        console.log(this.data.noneview)
        let self = this;
        //let defaultHeadUri = Constants.DefaultData.header;
        //console.log(self.data.json);
        let {
            mainImg,
            headUri,
            canvasTitle,
            QrCode
        } = {
            mainImg: this.data.posterUrl,
            canvasTitle: "你也一起来画吧~~",
            headUri: "cloud://cloud1-7gp73os4feb4632b.636c-cloud1-7gp73os4feb4632b-1315259068/poster小程序icon.png",
            QrCode: "cloud://cloud1-7gp73os4feb4632b.636c-cloud1-7gp73os4feb4632b-1315259068/小程序码.png"
        }

        let num = 0; //下载图片计数器
        //选取画板
        let ctx = wx.createCanvasContext('posterCanvas');
        ctx.clearRect(0, 0, 480, 390); //清空画板
        ctx.setFillStyle('#f6f7f1')
        ctx.fillRect(0, 0, 480, 390)

        //头像描述title
        ctx.setTextAlign('left');
        ctx.setTextBaseline("top");
        ctx.setFillStyle('#c0c0c0') //文字颜色：默认黑色
        ctx.setFontSize(15) //设置字体大小，默认10
        ctx.fillText("|    开启你的粤剧之旅", 85, 23, 250) //绘制文本
        //调用draw()开始绘制

        //写title 文字
        ctx.setTextAlign('left');
        ctx.setFillStyle('#696969'); //文字颜色：默认黑色
        ctx.font = `normal bold 18px sans-serif` //设置字体大小，默认10
        let canvasTitleArray = canvasTitle.split("");
        let firstTitle = ""; //第一行字
        let secondTitle = ""; //第二行字
        for (let i = 0; i < canvasTitleArray.length; i++) {
            let element = canvasTitleArray[i];
            let firstWidth = ctx.measureText(firstTitle).width;
            //console.log(ctx.measureText(firstTitle).width);
            if (firstWidth > 260) {
                let secondWidth = ctx.measureText(secondTitle).width;
                //第二行字数超过，变为...
                if (secondWidth > 260) {
                    secondTitle += "...";
                    break;
                } else {
                    secondTitle += element;
                }
            } else {
                firstTitle += element;
            }
        }
        //第一行文字
        ctx.fillText(firstTitle, 20, 290, 280) //绘制文本
        //第二行文字
        if (secondTitle) {
            ctx.fillText(secondTitle, 20, 310, 280) //绘制文本
        }

        //底部提示语句
        ctx.setTextBaseline("top");
        ctx.setFillStyle('#000') //文字颜色：默认黑色
        ctx.setTextAlign('center') //文字颜色：默认黑色
        ctx.setFontSize(16) //设置字体大小，默认10
        ctx.fillText("《"+title+"》", 160, 260, 280) //绘制文本

        //生成主图
        wx.getImageInfo({
            src: mainImg, //服务器返回的图片地址
            success: function (res) {
                //console.log(res);
                let h = res.height;
                let w = res.width;
                let setHeight = 1024, //默认源图截取的区域
                    setWidth = 1536; //默认源图截取的区域
                // if (w / h > 1.5) {
                //   setHeight = h;
                //   setWidth = parseInt(1536 / 1024 * h);
                // } else if (w / h < 1) {
                //   setWidth = w;
                //   setHeight = parseInt(1024 / 1536 * w);
                // } else {
                //   setHeight = h;
                //   setWidth = w;
                // };
                // console.log(setWidth, setHeight)
                ctx.drawImage(res.path, 0, 0, setWidth, setHeight, 14, 60, 288, 192);
                ctx.draw(true);
                //启动图片计数器
                console.log(num);
                if (num >= 3) {
                    wx.showLoading({
                        title: '保存到相册中...',
                    })
                    self.getPhotosAuthorize();
                } else {
                    num++;
                }
            },
            fail: function (res) {
                //失败回调
                self.posterFail();
            }
        });

        //生成二维码
        wx.getImageInfo({
            src: QrCode, //服务器返回的图片地址
            success: function (res) {
                ctx.drawImage(res.path, 200, 280, 90, 90);
                ctx.draw(true);
                //启动图片计数器
                console.log(num);
                if (num >= 3) {
                    wx.showLoading({
                        title: '保存到相册中...',
                    })
                    self.getPhotosAuthorize();
                } else {
                    num++;
                }
            },
            fail: function (res) {
                //失败回调
                self.posterFail();
            }
        });

        //获取用户头像
        /**
         * 生成微信头像的公共方法
         * @param {string} headImageLocal 微信头像
         */
        function canvasWxHeader(headImageLocal) {
            ctx.save();
            ctx.beginPath() //开始创建一个路径
            ctx.arc(36, 26, 46, 0, 2 * Math.PI, false) //画一个圆形裁剪区域
            ctx.clip() //裁剪
            ctx.closePath();
            ctx.drawImage(headImageLocal, 20, 20, 51, 32);
            ctx.draw(true);
            ctx.restore() //恢复之前保存的绘图上下文
            //启动图片计数器
            console.log(num);
            if (num >= 3) {
                wx.showLoading({
                    title: '保存到相册中...',
                })
                self.getPhotosAuthorize();
            } else {
                num++;
            }
        }
        wx.getImageInfo({
            src: headUri, //服务器返回的图片地址
            success: function (res) {
                //res.path是网络图片的本地地址
                let headImageLocal = res.path;
                app.globalData.tempWxHeader = res.path; //将头像缓存在全局变量里
                canvasWxHeader(headImageLocal)
                console.log('可以')
            },
            fail: function (res) {
                //失败回调
                self.posterFail();
            }
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

      // 保存
  bindcanvas() {
    wx.canvasToTempFilePath({
      canvasId: 'posterCanvas',
      success: function (res) {
        console.log(res)
        wx.downloadFile({
          url: res.tempFilePath,
          success(res) {
            console.log(res)
            if (res.statusCode == 200) {
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(res) {
                  console.log(res)
                }
              })
            }
 
          }
        })
      }
    })
  },

    preview(event) {
        let currentUrl = event.target.dataset.src
        wx.previewImage({
            current: currentUrl, // 当前显示图片的http链接
            urls: [currentUrl] // 需要预览的图片http链接列表
        })
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})